<template>
	<view class="warps" v-if="isShare" @click="isShare =false">
		<view class="share_body animation-slide-bottom" @click.stop="">
			<view class="text-sm text-gray margin-bottom">
				分享到
			</view>
			<view class=" rowsa animation-slide-bottom">
				<view v-for="(item,index) in shareList" :key='index' @click="shareMen(index)">
					<image :src="item.image" mode=""></image>
					<view class="share_title">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="share_submit" @click="isShareMen()">
				取消
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShare: false,
				shareList: [{
						image: '/static/share/wx.png',
						title: '微信'
					},
					{
						image: '/static/share/pyq.png',
						title: '朋友圈'
					}
				]
			}
		},
		methods: {
			/**
			 * @description 分享app
			 */
			shareMen(index) {
				this.isShare = false
				if (index == 0) { //分享微信
					this.$tools.showToast('分享页面暂未部署')
				} else { //分享朋友圈
					this.$tools.showToast('分享页面暂未部署')
				}
			},
			isShareMen() {
				this.isShare = false
			},
			isShareTrue() {
				this.isShare = true
			}
		}
	}
</script>

<style lang="scss">
	.warps {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9999;
	}

	.share_body {
		background-color: #FFFFFF;
		text-align: center;
		padding: 30rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;

		image {
			height: 100rpx;
			width: 100rpx;
		}
	}

	.share_submit {
		width: 630rpx;
		height: 86rpx;
		background: linear-gradient(180deg, #FF6B2B 0%, #FF8A19 100%);
		opacity: 1;
		line-height: 86rpx;
		text-align: center;
		color: white;
		margin: 0 auto;
		border-radius: 99rpx;
		margin-top: 30rpx;
	}

	.share_title {
		margin-top: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #828282;
		opacity: 1;
	}
</style>
